<template>
	<a-form :model="loginForm" name="normal_login" class="login-form">
		<!-- 有 name 属性规则才会生效 -->

		<a-form-item label="学号" name="id" :rules="[{ required: true, message: '请输入学号！' }]">
			<a-input v-model:value="loginForm.id">
				<template #prefix>
					<UserOutlined class="site-form-item-icon" />
				</template>
			</a-input>
		</a-form-item>

		<a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码！' }]">
			<a-input-password v-model:value="loginForm.password">
				<template #prefix>
					<LockOutlined class="site-form-item-icon" />
				</template>
			</a-input-password>
		</a-form-item>

		<a-form-item>
			<a-form-item name="remember" no-style>
				<a-checkbox v-model:checked="remember">记住我</a-checkbox>
			</a-form-item>
			<RouterLink class="login-form-forgot" to="forget_passsword">忘记密码</RouterLink>
		</a-form-item>

		<a-form-item>
			<a-button type="primary" :loading="iconLoading" @click="login">
				登录
			</a-button>
			<!-- 竖直分割线 -->
			<a-divider type="vertical" />
			<RouterLink to="/register">去注册</RouterLink>
		</a-form-item>
	</a-form>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import axios from 'axios';
import { useUserStore } from '@/stores/user';
const router = useRouter();
const userStore = useUserStore()
const remember = ref(false);
const iconLoading = ref(false);

// 发送请求
const login = () => {
	if (loginForm.id.length === 0 || loginForm.password.length === 0) {
		ElMessage.error('请输入完整信息')
		return
	}
	iconLoading.value = true
	axios(
		{
			method: 'post',
			url: '/login',
			data: loginForm
		}
	).then(
		res => {
			let data = res.data
			if (data.status === '1') {
				iconLoading.value = false
				userStore.$patch(state => {// 批量修改
					state.id = data.data.id
					state.name = data.data.name
				})
				console.log(data.data)
				localStorage.setItem('token', data.data)    // 学号
				router.replace('/home')
			} else {
				iconLoading.value = false
				ElMessage.error(data.msg)
			}
		}
	).catch(
		() => {
			ElMessage.error('服务器链接失败！')
			iconLoading.value = false
		}
	)
};

const loginForm = reactive({
	id: userStore.id,
	password: userStore.password,
});


<style scoped>
#components-form-demo-normal-login .login-form {
	max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
	float: right;
}

#components-form-demo-normal-login .login-form-button {
	width: 100%;
}
</style>
  